@charset "utf-8";
@import "common";
@import "common/carouselForSHP";
//共用变量
$aDefault:#444f58;

a{
    color: $aDefault;
}

//共用类
.btn_attention{
    @include btn(58px,26px);
    display: inline-block;
    font-size: 14px;
    border-radius:4px ;
    text-align: center;
    padding: 0;
}
.active{
    color: $aChooes;
}

.index{
    @include wrap;
    width:1000px;
    font-size: 0;
    height: 59px;
    line-height: 59px;
//  border-bottom: 1px solid #dfdfdf;
    *{
        font-size: 13px;
    }
    span{
        margin-left: 14px;
    }
    a{
        color: black;
        &:hover{
            color:$aChooes;
        }
    }
}
.main{
    @include wrap;
    width: 958px;
    padding: 12px 0px 5px;
    margin-bottom: 44px;
    box-sizing: border-box;
}
.function{
    border: 1px solid #efefef;
    width: 100%;
    height: 53px;
    line-height: 53px;
    position: relative;
    ul{
        display: flex;
        margin-left: 8px;
        li{
            font-size: 14px;
            width: 97px;
            text-align: center;
        }
        li:nth-child(2){
            width: 1px;
        }
        .line{
            display: inline-block;
            width: 1px;
            height: 14px;
            background: black;
            vertical-align: text-bottom;
        }
    }
    a:hover{
        color:$aChooes;
    }
}
.f_search{
    position: absolute;
    right: 21px;
    top:11px;
    width: 188px;
    height: 28px;
    border: 1px solid $borderColor;
    line-height: normal;
    border-radius: 30px;
    text-align: center;
    padding-left: 18px;
    box-sizing: border-box;
    a{
        display: inline-block;
        width: 28px;
        height: 100%;
        line-height: 26px;
        right: 0;
        vertical-align: middle;
        .icon-fangdajing{
            font-size: 20px;
            color: red;
        }
    }
    input{
        width: 130px;
        border: none;
        vertical-align: middle;
    }
}
.shop-wrap{
    width:100%;
    height: 298px;
    border: 1px solid $borderColor;
    margin-top:14px;
    font-size: 0;
    display: flex;
    .shop-name{
        width:218px ;
        height: 260px;
        text-align: center;
        .brandPic{
            @include imgFix(70px,70px);
            margin: 0 auto;
            margin-top:35px;
        }
        h2{
            font-size: 16px;
            
            font-weight: normal;
            line-height:16px;
            margin: 22px 0 11px;
            text-transform: uppercase;
            @include textOverflow;
            a{
                color: red;
            }
        }
        p{
            font-size: 12px;
            height: 50px;
            width: 115px;
            margin: 0 auto;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .shop-product{
        display: flex;
        width: 721px;
        justify-content: space-between;
        >div{
            width: 170px;
            height: 258px;
            border: 1px solid $borderColor;
            margin-right: 11px;
            position: relative;
            background: #efefef;
             &:hover{
                .imgContent{
                     div{
                         opacity: 2;
                     }
                 }
                 .btn{
                    img{
                        transform: rotate(0);
                        animation: turn 300ms linear infinite;
                    }
                }
            }
                 .imgContent{
                     width: 170px;
                     height: 170px;
                     overflow: hidden;
                     text-align: center;
                     position: relative;
                     img{
                         position:absolute ;
                         top:-99px;
                         bottom:-99px;
                         right:-99px;
                         left:-99px;
                         margin: auto;
                         width: 100%;
                     }
                      div{
                         opacity: 0;
                         position: absolute;
                         width: 100%;
                         height: 100%;
                         background: rgba(0,0,0,.5);
                         top: 0;
                         color:white;
                         text-align: center;
                         line-height: 198px;
                         transition: all 300ms;
                         p{
                            font-size: 20px; 
                            border:1px solid white;
                            line-height: normal;
                            margin-top: 40%;
                         }
                     }
                 }
                 .description{
                     padding: 9px 11px 10px 13px;
                     box-sizing: border-box;
                     position: relative;
                     p:first-child{
                          margin-bottom: 2px;
                     }
                     p:nth-child(2){
                         margin-left: -3px;
                         margin-bottom: 12px;
                     }
                     p{
                         font-size: 14px;
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
                     }
                     a{
                        float: right;
                     }
                 }
        }
    }
    >div{
        margin-top: 19px;
    }
}
.page{
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
    ul{
        display: flex;
        justify-content: flex-end;
        li{
            width: 36px;
            min-height: 36px;
            border-radius: 3px;
            border:1px solid $borderColor;
            line-height: 36px;
            margin-left: 7px;
            a{
                font-size: 13px;
                width: 100%;
                height: 100%;
                display: inline-block;
                text-align: center;
                line-height: 36px;
                &:hover{
                    color: $aChooes;
                }
               span{
                    display: inline-block;
                    overflow: hidden;
                    font-size: 1px;
                    width:11px;
                    height: 7px;
                    background: url(../img/selector.png) no-repeat 0 0/100% 100%; 
                }
               .pre{
                   transform: rotate(90deg);
               }
               .next{
                   transform: rotate(-90deg);
               }
              
            }
           
        }
        .pageActive{
            border-color: $aChooes;
            a{
                color: $aChooes;
            }
        }
         li:last-child{
           margin-left: 14px;
        }
        .noborder{
            border:none;
        }
        
    }
    >span{
        width: 66px;
        max-height: 36px;
        border:1px solid $borderColor;
        line-height: 36px;
        border-radius: 3px;
        input{
            width: 40%;
            margin-left: 10px;
            border: none;
        }
    }
    >a{
        width: 66px;
        max-height: 36px;
        border:1px solid $borderColor;
        line-height: 36px;
        border-radius: 3px;
        text-align: center;
        margin-left: 9px;
    }
}

